<template>
  <view class="alipay-demo">
    <view class="order-info">
      <text class="title">支付宝沙箱支付测试</text>
      <view class="order-item">
        <text>订单号: {{ orderInfo.outTradeNo }}</text>
      </view>
      <view class="order-item">
        <text>商品名称: {{ orderInfo.subject }}</text>
      </view>
      <view class="order-item">
        <text>金额: {{ orderInfo.totalAmount }}元</text>
      </view>
    </view>
    
    <button class="pay-button" @click="handleAlipay">发起支付</button>
    
    <view class="result" v-if="paymentResult">
      <text class="result-title">支付结果:</text>
      <text>{{ paymentResult }}</text>
    </view>
  </view>
</template>

<script>
import { createAlipayOrder } from '@/api/alipay.js'

export default {
  data() {
    return {
      // 订单信息
      orderInfo: {
        outTradeNo: '20230520001', // 商户订单号
        subject: '测试商品', // 订单标题
        totalAmount: 0.01 // 订单金额（单位：元）
      },
      paymentResult: '' // 支付结果
    }
  },
  
  methods: {
    /**
     * 处理支付宝支付
     */
    async handleAlipay() {
      try {
        // 创建订单并发起支付
        const result = await createAlipayOrder(this.orderInfo)
        
        // 在实际项目中，这里会返回一个支付表单
        // 由于uni-app的限制，我们模拟支付流程
        console.log('支付宝支付请求结果:', result)
        
        // 模拟支付成功
        this.paymentResult = '支付请求已提交，请在支付宝沙箱APP中完成支付'
        
        // 显示提示信息
        uni.showToast({
          title: '支付请求已提交',
          icon: 'success'
        })
      } catch (error) {
        console.error('支付宝支付失败:', error)
        this.paymentResult = '支付失败: ' + error.message
        
        // 显示错误信息
        uni.showToast({
          title: '支付失败',
          icon: 'none'
        })
      }
    }
  }
}
</script>

<style scoped>
.alipay-demo {
  padding: 20px;
}

.title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 20px;
  display: block;
  text-align: center;
}

.order-info {
  background-color: #f5f5f5;
  padding: 15px;
  border-radius: 8px;
  margin-bottom: 20px;
}

.order-item {
  margin-bottom: 10px;
  padding: 5px 0;
}

.order-item text {
  font-size: 14px;
}

.pay-button {
  width: 100%;
  height: 45px;
  background-color: #108ee9;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  margin-bottom: 20px;
}

.result {
  background-color: #e6f7ff;
  padding: 15px;
  border-radius: 8px;
}

.result-title {
  font-weight: bold;
  display: block;
  margin-bottom: 5px;
}
</style>